<template>
  <div>
    <div class="nine-index">
      <div class="nine-header">
        <div>
          <van-icon name="arrow-left" @click="gof" />
        </div>
        <div class="nine-middle"></div>
      </div>
      <div class="nine-nav">
        <van-tabs v-model:active="active">
          <van-tab
            v-for="item in tabs"
            :key="item.id"
            :title="item.task"
            :to="item.name"
          >
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
      <keep-live>
        <router-view></router-view>
      </keep-live>
    </van-list>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    const state = reactive({
      NineList: [],
      tabs: [
        {
          id: 1,
          task: "推荐",
          name: "/nines/index0",
        },
        {
          id: 2,
          task: "3.9元区",
          name: "/nines/index1",
        },
        {
          id: 3,
          task: "9.9元区",
          name: "/nines/index2",
        },
        {
          id: 4,
          task: "19.9元区",
          name: "/nines/index3",
        },
        {
          id: 5,
          task: "29.9元区",
          name: "/nines/index4",
        },
      ],
    });
    return {
      ...toRefs(state),
      list: [],
      loading: false,
      finished: false,
      gof() {
        router.back();
      },
    };
  },
});
</script>

<style scoped>
.nine-index {
  background: rgb(255, 128, 48);
  font-size: 0.32rem;
  display: fixed;
  color: white;
  top: 0;
  right: 0;
  left: 0;
  padding: 0.1rem;
}
/deep/ .van-tab {
  background: rgb(255, 128, 48);
  color: white;
  border: none;
}
/deep/.van-tabs__nav--card {
  background: rgb(255, 128, 48);
  border: none;
}
</style>
